<template>
  <a-layout style="min-height: 100vh">
    <a-layout-content style="background-color: #F2F2E6">
      <div style="padding-top: 8vh; padding-bottom: 4vh;">
        <v-card-title class="text-center justify-center py-6">
          <h1 class="font-weight-bold text-h2 basil--text">
            Solution Depository
          </h1>
        </v-card-title>
        <v-card-subtitle class="text-center justify-center">
          <h2 class="font-weight-bold text-h3 basil--text">
            解决方案仓库
          </h2>
        </v-card-subtitle>
        <v-tabs
          v-model="tab"
          background-color="transparent"
          color="basil"
          grow
        >
          <v-tab
            v-for="item in items"
            :key="item"
            style="font-family: 等线,serif; font-weight: bolder"
          >
            {{ item }}
          </v-tab>

        </v-tabs>

        <v-tabs-items v-model="tab">
          <v-tab-item>
            <v-card color="basil" flat>
              <v-card-text>
                <a-spin tip="Loading..." :spinning="searchLoading">
                  <a-list item-layout="vertical" size="large" :pagination="pagination_U" :data-source="listUpload">
                    <div slot="footer"><b>MindFall</b> Solution Depository —— 已发布解决方案</div>
                    <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                      <v-card-text style="padding: 2vw 3vh 1vw 2vh;">
                        <v-row>
                          <v-col style="padding: 0">
                            <v-row style="padding-left: 10px; margin-bottom: 5px">
                              <h1 class="font-weight-bold text-sm-h6 basil--text">
                                {{item.name}}
                              </h1>
                              <v-spacer>
                              </v-spacer>
                              <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">
                                <a-icon type="calendar" />
                                创建时间：{{ item.relativeTime }}&emsp;
                                <a-icon type="history" />
                                当前状态：{{ item.statement }}&emsp;
                              </span>
                              <a-dropdown>

                                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size: 15px; font-weight: bolder">
                                  操作 <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay" disabled="true">
                                  <a-menu-item @click="showSecrete_a(item)">
                                    <a-icon type="team" style="color: #89B8CA"/>
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #89B8CA" >设为私密</span>
                                  </a-menu-item>
                                  <a-menu-item @click="edit(item)">
                                    <a-icon type="edit" style="color: #d8caaf" />
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #d8caaf" >编辑解决方案</span>
                                  </a-menu-item>
                                  <a-menu-item @click="showFakeDelete(item)">
                                    <a-icon type="delete" style="color: #a27e7e" />
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #a27e7e" >删除解决方案</span>
                                  </a-menu-item>
                                </a-menu>
                              </a-dropdown>
                            </v-row>
                            <div>
                              <p style="font-family: 等线; font-weight: bold; font-size: 14px">{{item.detail.substring(0,300)}}
                                <span v-show="item.detail.length > 300">…</span>
                              </p>
                              <a-icon type="eye" />
                              {{item.view}}&emsp;
                              <a-icon type="star" />
                              {{item.collections}}&emsp;
                              <a-icon type="message" />
                              {{item.comments}}
                              <span class="float-lg-right">由创新引导&nbsp;<b>{{item.guideName}}</b>&nbsp;产生</span>
                            </div>
                          </v-col>
                        </v-row>
                      </v-card-text>
                    </a-list-item>
                  </a-list>
                </a-spin>
              </v-card-text>
            </v-card>
          </v-tab-item>
          <v-tab-item>
            <v-card color="basil" flat>
              <v-card-text>
                <a-spin tip="Loading..." :spinning="searchLoading">
                  <a-list item-layout="vertical" size="large" :pagination="pagination_S" :data-source="listSecret">
                    <div slot="footer"><b>MindFall</b> Creativity Depository —— 未发布解决方案</div>
                    <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                      <v-card-text style="padding: 2vw 3vh 1vw 2vh;">
                        <v-row>
                          <v-col style="padding: 0">
                            <v-row style="padding-left: 10px; margin-bottom: 5px">
                              <h1 class="font-weight-bold text-sm-h6 basil--text">
                                {{item.name}}
                              </h1>
                              <v-spacer>
                              </v-spacer>
                              <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">

                                <a-icon type="calendar" />
                                创建时间：{{ item.createTime }}&emsp;
                                <a-icon type="history" />
                                当前状态：{{ item.statement }}&emsp;
                              </span>
                              <a-dropdown>

                                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size: 15px; font-weight: bolder">
                                  操作 <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay" disabled="true">
                                  <a-menu-item @click="showUpload(item)">
                                    <a-icon type="upload" style="color: #89B8CA" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #89B8CA" >发布解决方案</span>
                                  </a-menu-item>
                                  <a-menu-item @click="edit(item)">
                                    <a-icon type="edit" style="color: #d8caaf" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #d8caaf" >编辑解决方案</span>
                                  </a-menu-item>
                                  <a-menu-item @click="showFakeDelete(item)">
                                    <a-icon type="delete" style="color: #a27e7e" />
                                    <span style="font-family: 等线; font-weight: bolder; color: #a27e7e" >删除解决方案</span>
                                  </a-menu-item>
                                </a-menu>
                              </a-dropdown>
                            </v-row>

                            <p style="font-family: 等线; font-weight: bold; font-size: 14px">{{item.detail.substring(0,300)}}
                              <span v-show="item.detail.length > 300">…</span>
                            </p>
                            <span class="float-lg-right">由创新引导&nbsp;<b>{{item.guideName}}</b>&nbsp;产生</span>



                          </v-col>
                        </v-row>
                      </v-card-text>
                    </a-list-item>
                  </a-list>
                </a-spin>
              </v-card-text>
            </v-card>
          </v-tab-item>
          <v-tab-item>
            <v-card color="basil" flat>
              <v-card-text>
                <a-spin tip="Loading..." :spinning="searchLoading">
                  <a-list item-layout="vertical" size="large" :pagination="pagination_R" :data-source="listRubbish">
                    <div slot="footer"><b>MindFall</b> Creativity Depository —— 解决方案回收站</div>
                    <a-list-item slot="renderItem" key="item.id" slot-scope="item, index">
                      <v-card-text style="padding: 2vw 3vh 1vw 2vh;">
                        <v-row>
                          <v-col style="padding: 0">
                            <v-row style="padding-left: 10px; margin-bottom: 5px">
                              <h1 class="font-weight-bold text-sm-h6 basil--text">
                                {{item.name}}
                              </h1>
                              <v-spacer>
                              </v-spacer>
                              <span style="font-size: 15px; font-weight: bolder; color: #89B8CA">

                                <a-icon type="calendar" />
                                创建时间：{{ item.createTime }}&emsp;
                                <a-icon type="history" />
                                当前状态：{{ item.statement }}&emsp;
                              </span>
                              <a-dropdown>
                                <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size: 15px; font-weight: bolder">
                                  操作 <a-icon type="down" />
                                </a>
                                <a-menu slot="overlay" disabled="true">
                                  <a-menu-item @click="showSecrete_b(item)">
                                    <a-icon type="undo" style="color: #89B8CA"/>
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #89B8CA" >恢复解决方案</span>
                                  </a-menu-item>
                                  <a-menu-item @click="showRealDelete(item)">
                                    <a-icon type="scissor" style="color: #a27e7e" />
                                    <span style="font-family: 等线,serif; font-weight: bolder; color: #a27e7e" >彻底删除</span>
                                  </a-menu-item>
                                </a-menu>
                              </a-dropdown>
                            </v-row>
                            <p style="font-family: 等线,serif; font-weight: bold; font-size: 14px">{{item.detail.substring(0,300)}}
                              <span v-show="item.detail.length > 300">…</span>
                            </p>
                            <span class="float-lg-right">由创新引导&nbsp;<b>{{item.guideName}}</b>&nbsp;产生</span>

                          </v-col>

                        </v-row>
                      </v-card-text>
                    </a-list-item>
                  </a-list>
                </a-spin>
              </v-card-text>
            </v-card>
          </v-tab-item>
        </v-tabs-items>
      </div>

      <a-modal
        :visible="dialog"
        title="操作确认"
        max-width="400"
        :closable="false"
        @cancel="dialog = false"
        @ok="handle"
      >
        <p style="font-family: '微软雅黑 Light',serif; font-weight: bold">
          <a-icon type="info-circle" style="color: #e28300"/>
          {{text}}
        </p>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import request from "../utils/request";

  export default {
    name: "Creativity",
    created() {
      this.load()
    },
    computed:{

    },
    data () {
      return {
        searchLoading: false, //是否加载
        tab: null, //标签页绑定
        items: [
          '已发布方案', '未发布方案', '回收站',
        ], //标签页内容
        dialog: false, //提示对话框
        listUpload: [], //已发布列表
        listSecret: [], //未发布列表
        listRubbish: [], //回收站列表
        text: '', //对话框内容
        toHandleEvent: '', //对话框处理事件
        solutionObj: {}, //处理方案对象
        pagination_U: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, //已发布分页
        pagination_S: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, //未发布分页
        pagination_R: {
          onChange: page => {
            this.$vuetify.goTo(0, {
              duration: 500,
              offset: -100,
              easing: 'easeInOutCubic',
            })
          },
          pageSize: 5,
        }, //回收分页
      }
    },
    methods:{
      // 加载数据
      async load(){
        this.listUpload = []
        this.listRubbish = []
        this.listSecret = []
        this.searchLoading = true
        await request.get('/solution/findByUserId').then(res => {
          if (res.code === '200'){
            this.searchLoading = false
            for (let i = 0; i < res.data.length; i++){
              if (res.data[i].statement === '待审核' || res.data[i].statement === '已发布')
                this.listUpload.push(res.data[i])
              else if (res.data[i].statement === '未发布')
                this.listSecret.push(res.data[i])
              else if (res.data[i].statement === '回收')
                this.listRubbish.push(res.data[i])
            }
          }
        })
      },

      // 发布方案显示对话框
      showUpload(item){
        this.text = '确定发布该解决方案吗？请确保不会有与该解决方案相关的专利受到影响。'
        this.toHandleEvent = 'upload'
        this.solutionObj = {"id": item.id, "statement": '待审核', guideId: item.guideId}
        this.dialog = true
      },
      // 发布请求
      upload(item){
        request.post('/solution/manageSolution', item).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('解决方案发布成功')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      // 已发布-未发布
      showSecrete_a(item){
        this.text = '确定将该解决方案设为私密吗？该解决方案将不会在解决方案社区显示。若当前为待审核状态，将从审核队列中移除该解决方案。'
        this.toHandleEvent = 'setSecrete'
        this.solutionObj = {"id": item.id, "statement": '未发布', guideId: item.guideId}
        this.dialog = true
      },
      // 回收-未发布
      showSecrete_b(item){
        this.text = '该解决方案将恢复到未发布解决方案列表中。'
        this.toHandleEvent = 'setRecover'
        this.solutionObj = {"id": item.id, "statement": '未发布', guideId: item.guideId}
        this.dialog = true
      },
      // 设为未发布请求
      secrete(item){ //设为私密
        request.post('/solution/manageSolution', item).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('该解决方案已转移至未发布解决方案列表')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      recover(item) { //恢复
        request.post('/solution/recoverySolution', item).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('该解决方案已转移至未发布解决方案列表')
            this.load()
          } else {
            this.sendWarnMessage('该解决方案已被恢复')
            this.load()
          }
        })
      },
      // 假删除
      showFakeDelete(item){
        this.text = '确定回收该解决方案吗？'
        this.toHandleEvent = 'toFakeDelete'
        this.solutionObj = {"id": item.id, "statement": '回收', guideId: item.guideId}
        this.dialog = true
      },
      fakeDelete(item){
        request.post('/solution/manageSolution', item).then(res => {
          if (res.code === '200'){
            this.sendSuccessMessage('解决方案删除成功，可在回收站中查看')
            this.load()
          } else {
            this.sendWarnMessage(res.msg)
            this.load()
          }
        })
      },
      // 真删除
      showRealDelete(item){
        this.text = '确定彻底删除该解决方案吗？与该解决方案相关的所有数据将彻底抹除。'
        this.toHandleEvent = 'toRealDelete'
        this.solutionObj = item
        this.dialog = true
      },
      realDelete(item){
        request.delete('/solution/' + item.id).then(res => {
          if (res.code === '200')
            this.sendSuccessMessage('删除成功')
          else
            this.sendWarnMessage(res.msg)
          this.load()
        })
      },
      // 编辑操作
      async edit(row) {
        await this.$store.commit('SET_KEEP_ALIVE', [])
        sessionStorage.setItem('guideId',window.btoa(window.encodeURIComponent(JSON.stringify(row.guideId))))
        this.$store.state.maxStep = row.process
        this.$store.commit('SET_KEEP_ALIVE', ['guidance_questions', 'guidance_model', 'guidance_retrieval', 'solution_edit'])
        let notfoundUrl = this.$router.resolve({path: "/intelligent_guidance/solution_edit"});
        window.open(notfoundUrl.href, '_blank');
      },
      // 全局处理事件
      handle(){
        if (this.toHandleEvent === 'setSecrete')
          this.secrete(this.solutionObj)
        else if (this.toHandleEvent === 'toFakeDelete')
          this.fakeDelete(this.solutionObj)
        else if (this.toHandleEvent === 'upload')
          this.upload(this.solutionObj)
        else if (this.toHandleEvent === 'toRealDelete')
          this.realDelete(this.solutionObj)
        else if (this.toHandleEvent === 'setRecover')
          this.recover(this.solutionObj)
        this.dialog = false
      },

    }
  }
</script>

<style>
  .basil {
    background-color: #F2F2E6 !important;
  }
  .basil--text {
    color: #89B8CA !important;
  }
  .v-application ul, .v-application ol{
    padding-left: 0 !important;
  }
  .ant-modal-body{
    padding-bottom: 5px !important;
  }

</style>
